<template>
    <el-card class="form-container" shadow="never">
        <el-form :model="gatewaydevice"
                 ref="bannerFrom"
                 label-width="150px"
                 size="small">
            <el-form-item label="设备名:">
                <el-input v-model="gatewaydevice.deviceName" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="设备类型:">
                <el-input v-model="gatewaydevice.deviceType" type="number" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="ieee_ep地址:">
                <el-input v-model="gatewaydevice.ieeeEpAddr" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="所属网关:">
                <el-select v-model="gatewaydevice.gatewayId"
                           class="input-width"
                           placeholder="全部"
                           clearable>
                    <el-option v-for="item in gatewayOptions"
                               :key="item.value"
                               :label="item.deviceId"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属房间:">
                <el-select v-model="gatewaydevice.deviceId"
                           class="input-width"
                           placeholder="全部"
                           clearable>
                    <el-option v-for="item in deviceOptions"
                               :key="item.value"
                               :label="item.machineName"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是不是门:">
                <el-radio-group v-model="gatewaydevice.isDoor">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">不是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是不是喇叭:">
                <el-radio-group v-model="gatewaydevice.isVoice">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">不是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('bannerFrom')">提交</el-button>
                <el-button v-if="!isEdit" @click="resetForm('bannerFrom')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
    import SingleUpload from "@/components/Upload/singleUpload";
    import { createGatewayDevice, updateGatewayDevice, getGatewayDevice} from "@/api/qsg/gatewaydevice";
    import { fetchList } from "@/api/qsg/gatewayinfo";
    import { fetchList as fetchListDevice } from "@/api/qsg/device";

    const defaultGateway = {
        deviceName: '',
        deviceType: 0,
        ieeeEpAddr: ''
    };

    export default {
        name: "GatewayDetail",
        components: { SingleUpload },
        props: {
            isEdit: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                gatewaydevice: {},
                gatewayOptions:[],
                deviceOptions:[]
            };
        },
        created() {
            fetchList().then(response => {
                this.gatewayOptions = response.data.records;
            });
            this.getDevices();
            if (this.isEdit) {
                getGatewayDevice(this.$route.query.id).then((response) => {
                    this.gatewaydevice = response.data;
                });
            } else {
                this.gatewaydevice = Object.assign({}, defaultGateway);
            }
        },
        methods: {
            getDevices(){
                fetchListDevice().then(response => {
                    this.deviceOptions = response.data.records;
                });
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm("是否提交数据", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            if (this.isEdit) {
                                updateGatewayDevice(this.$route.query.id, this.gatewaydevice).then(
                                    (response) => {
                                        this.$refs[formName].resetFields();
                                        this.$message({
                                            message: "修改成功",
                                            type: "success",
                                            duration: 1000,
                                        });
                                        this.$router.back();
                                    }
                                );
                            } else {
                                createGatewayDevice(this.gatewaydevice).then((response) => {
                                    this.$refs[formName].resetFields();
                                    this.gatewaydevice = Object.assign({}, defaultGateway);
                                    this.$message({
                                        message: "提交成功",
                                        type: "success",
                                        duration: 1000,
                                    });
                                    this.$router.back();
                                });
                            }
                        });
                    } else {
                        this.$message({
                            message: "验证失败",
                            type: "error",
                            duration: 1000,
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.gatewaydevice = Object.assign({}, defaultGateway);
            },
        },
    };
</script>
<style scoped>
    .input-width {
        width: 70%;
    }
</style>


